<template>
  <div class="search_question_module">
    <nav-bar></nav-bar>
    <div class="module" @click="moduleClick(index)" v-for="(item, index) in module">
      <div class="title">{{item.title}}</div>
      <div class="desc">{{item.desc}}</div>
    </div>
  </div>
</template>

<script>
  import NavBar from "components/content/navBar/NavBar";

  export default {
    name: "SearchQuestionModule",
    components: {
      NavBar
    },
    data() {
      return {
        module: [
          {
            title: 'Query问答',
            desc: '题库收集于用户发布的面经，真实性、针对性较强',
            path: '/search/queryQuestion'
          },
          {
            title: '常用题库',
            desc: '题库收藏有各种热门题型，答案具有参考性',
            path: '/search/commonQuestion'
          }
        ]
      }
    },
    methods: {
      moduleClick(index) {
        this.$router.push({path: this.module[index].path}, onComputed => {}, onAbort => {})
      }
    }
  }
</script>

<style scoped>
  .search_question_module {
    width: 700px;
    margin: 100px auto 0;
  }

  .module {
    width: 700px;
    height: 150px;
    margin-bottom: 70px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0, .05);
    transition: all 1s ease 0s;
    text-align: center;
    cursor: pointer;
  }

  .module:hover {
    transform: scale(1.05, 1.05);
    box-shadow: 0 0 10px rgba(0, 39, 102, 0.2);
  }

  .module .title {
    font-size: 30px;
    line-height: 90px;
  }

  .module .desc {
    font-size: 16px;
  }


</style>
